<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Globe - ECHARTS-GL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
    <link rel="stylesheet" href="./common.css">
</head>
<body>
<div id="main"></div>
<script src="../node_modules/echarts/dist/echarts.js"></script>
<script src="../node_modules/echarts/map/js/world.js"></script>
<script src="../dist/echarts-gl.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="js/commonUI.js"></script>
<script>
    var chart = echarts.init(document.getElementById('main'));

    var canvas = document.createElement('canvas');
    var mapChart = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
    });

    mapChart.setOption({
        series: [
            {
                type: 'map',
                map: 'world',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                boundingCoords: [[-180, 90], [180, -90]],
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: 'rgb(100, 5, 10)',
                        color: 'transparent'
                    }
                }
            }
        ]
    });

    // https://www.behance.net/gallery/50293671/T-GLOBE

    $.getJSON('./data/flights.json', function (data) {
        var airports = data.airports.map(function (item) {
            return {
                coord: [item[3], item[4]]
            }
        });

        function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
        }

        // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
        var routesGroupByAirline = {};
        data.routes.forEach(function (route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
                routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
        });

        var pointsData = [];
        data.routes.forEach(function (airline) {
            pointsData.push(getAirportCoord(airline[1]));
            pointsData.push(getAirportCoord(airline[2]));
        });

        var series = data.airlines.map(function (airline) {
            var airlineName = airline[0];
            var routes = routesGroupByAirline[airlineName];

            if (!routes) {
                return null;
            }
            return {
                type: 'lines3D',
                name: airlineName,

                effect: {
                    show: true,
                    trailWidth: 2,
                    trailLength: 0.2,
                    trailOpacity: 0.4,
                    trailColor: 'rgb(30, 30, 60)'
                },

                lineStyle: {
                    width: 1,
                    color: 'rgb(50, 50, 150)',
                    // color: 'rgb(118, 233, 241)',
                    opacity: 0.1
                },
                blendMode: 'lighter',

                distanceToGlobe: 4,

                data: routes.map(function (item) {
                    return [airports[item[1]].coord, airports[item[2]].coord];
                })
            };
        }).filter(function (series) {
            return !!series;
        });
        series.push({
            type: 'scatter3D',
            coordinateSystem: 'globe',
            blendMode: 'lighter',
            symbolSize: 2,
            distanceToGlobe: 4,
            itemStyle: {
                color: 'rgb(50, 50, 150)',
                opacity: 0.2
            },
            data: pointsData
        });

        chart.setOption({
            toolbox: {
                feature: {
                    saveAsImage: {}
                },
                iconStyle: {
                    normal: {
                        borderColor: '#fff'
                    }
                }
            },
            legend: {
                selectedMode: 'single',
                left: 'left',
                data: Object.keys(routesGroupByAirline),
                orient: 'vertical',
                textStyle: {
                    color: '#fff'
                }
            },
            globe: {

                environment: 'asset/starfield.jpg',

                heightTexture: 'asset/bathymetry_bw_composite_4k.jpg',

                displacementScale: 0.05,
                displacementQuality: 'high',

                baseColor: '#000',

                shading: 'realistic',
                realisticMaterial: {
                    roughness: 0.2,
                    metalness: 0
                },

                postEffect: {
                    enable: true,
                    depthOfField: {
                        enable: true
                    }
                },
                temporalSuperSampling: {
                    enable: true
                },
                light: {
                    ambient: {
                        intensity: 0
                    },
                    main: {
                        intensity: 0.1,
                        shadow: false
                    },
                    ambientCubemap: {
                        texture: 'asset/lake.hdr',
                        exposure: 1,
                        diffuseIntensity: 0.5,
                        specularIntensity: 2
                    }
                },
                viewControl: {
                    autoRotate: false
                },

                silent: true
                // layers: [{
                //     type: 'blend',
                //     blendTo: 'emission',
                //     texture: mapChart,
                //     intensity: 10
                // }]
            },
            series: series
        });
        window.addEventListener('keydown', function () {
            series.forEach(function (series, idx) {
                chart.dispatchAction({
                    type: 'lines3DToggleEffect',
                    seriesIndex: idx
                });
            })
        });
    });

    window.addEventListener('resize', function () {
        chart.resize();
    });

</script>
</body>
</html>
